<template>
  <div id="app">
    <img alt="Vue logo"
         src="./assets/logo.png">
    <div class="tabs">
      <div class="tabs_nav">
        <div class="nav_item"
             :class="{ choose: index === currentIndex }"
             v-for="(item,index) of navList"
             :key="index"
             @click="chooseTabsItem(index)">
          {{ item.title }}
        </div>
      </div>
      <div class="tabs_content">
        <div class="prod_item"
             v-for="(item, index) of currentDataList"
             :key="index">
          <div class="title">{{ item.name }}</div>
          <div class="info">
            <p class="price">售价：{{ item.price }}</p>
            <div class="soldBtn"
                 v-if="currentIndex === 2"
                 @click="soldProd(index)">出售</div>
            <div class="buyBtn"
                 v-else
                 @click="buyProd(index)">购买</div>
          </div>
        </div>
      </div>
    </div>
    <div class="mask"
         v-if="mask">
      <div class="pop">
        <h3 class="pop_title">提示</h3>
        <div class="pop_message">是否确定购买?</div>
        <div class="btn-area">
          <div class="comfirm"
               @click="confirmBtn(true)">确定</div>
          <div class="cancel"
               @click="confirmBtn(false)">取消</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      navList: [{
        title: '农场'
      }, {
        title: '牧场'
      }, {
        title: '仓库'
      }],
      // 遮罩层
      mask: false,
      // 提示信息状态
      messageStatus: false,
      // tabs索引默认值
      currentIndex: 0,
      // 当前展示数据
      currentDataList: [],
      // 当前选中商品
      currentProd: {},
      // 模拟请求回来的数据
      dataList1: [{
        name: '马铃薯',
        price: 1
      }, {
        name: '西红柿',
        price: 1.5
      }, {
        name: '茄子',
        price: 0.7
      }, {
        name: '地瓜',
        price: 2.1
      }, {
        name: '玉米',
        price: 1.7
      }, {
        name: '豆角',
        price: 3.2
      }],
      dataList2: [{
        name: '猪',
        price: 350
      }, {
        name: '牛',
        price: 700
      }, {
        name: '羊',
        price: 400
      }],
      dataList3: [{
        name: '商品A',
        price: '100'
      }, {
        name: '商品B',
        price: '300'
      }, {
        name: '商品C',
        price: '200'
      }]
    }
  },
  mounted () {
    this.currentDataList = this.dataList1
    this.dataList3 = JSON.parse(sessionStorage.getItem('warehouseList')) || this.dataList3
  },
  methods: {
    chooseTabsItem (index) {
      this.currentIndex = index
      if (index === 0) {
        this.currentDataList = this.dataList1
      } else if (index === 1) {
        this.currentDataList = this.dataList2
      } else {
        this.currentDataList = this.dataList3
      }
    },
    // 购买商品方法
    buyProd (index) {
      this.mask = true
      this.currentProd = this.currentDataList[index]
    },
    // 出售商品方法
    // soldProd (index) {
    //   this.
    // },
    confirmBtn (boolean) {
      console.log('点击结果', boolean)
      this.mask = false
      if (boolean === false) return
      // 添加
      let cloneProd = JSON.parse(JSON.stringify(this.currentProd))
      cloneProd.price = (cloneProd.price / 2).toFixed(1)
      this.dataList3.push(cloneProd)
      // console.log('添加成功！')
      sessionStorage.setItem('warehouseList', JSON.stringify(this.dataList3))
      // 重置
      this.currentProd = {}
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* margin-top: 60px; */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
img {
  width: 160px;
  padding-bottom: 40px;
}
.tabs {
  width: 40%;
  border: 1px solid #eee;
}
.tabs_nav {
  display: flex;
  font-size: 12px;
}
.tabs_nav .nav_item {
  padding: 4px 6px;
  border-right: 1px solid #eee;
  cursor: pointer;
}
.tabs_nav .nav_item:hover {
  background-color: tomato;
  color: #fff;
  transition: all 0.6s;
}
.choose {
  background-color: tomato;
  color: #fff;
}
.tabs_content {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  /* min-height: 200px; */
  border-top: 1px solid #eee;
}
.tabs_content .prod_item {
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 25%;
  box-shadow: 0 0 6px 0 skyblue inset;
  max-height: 120px;
}
.title {
  height: 40px;
  line-height: 40px;
}
.info {
  font-size: 12px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.info .price {
  text-align: center;
  margin-right: 20px;
}
.info .buyBtn,
.info .soldBtn {
  color: #fff;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
}
.info .buyBtn {
  background-color: tomato;
}
.info .soldBtn {
  background-color: #f58220;
}
.mask {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
}

.pop {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 220px;
  background-color: #fff;
  /* padding: 0 40px 20px 40px; */
  border-radius: 10px;
}
.pop_title {
  margin-top: 20px;
}
.pop_message {
  height: 60px;
  line-height: 60px;
}
.btn-area {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  padding: 0 6px;
  justify-content: space-between;
}

.btn-area .comfirm,
.btn-area .cancel {
  padding: 6px 12px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.btn-area .comfirm {
  color: red;
}
.btn-area .cancel {
  color: green;
}
</style>
